<template>
  <router-link class="special"
               to="">
    <div class="top">
      <img v-lazy="special.cover"/>
      <div class="cover-img"></div>
      <div class="cover">
        <div class="left">
          <p class="ellipsis">{{ special.title }}</p>
          <p class="ellipsis">{{ special.summary }}</p>
        </div>
        <div class="right">
          <div>￥{{ special.lowestPrice }}起</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <span class="fl">
        <i class="iconfont icon-hart1"/>
        {{ special.collectNum }}
      </span>
      <span class="fl">
        <i class="iconfont icon-see"/>
        {{ special.viewNum }}
      </span>
      <span class="fr">
        <i class="iconfont icon-message"/>
        {{ special.replyNum }}
      </span>
    </div>
  </router-link>
</template>

<script lang="ts"
        setup>
import type {Special} from '@/types/special'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Special
}>()
let {data: special} = toRefs(props)
</script>

<style lang="less"
       scoped>
.special {
  width: 404px;

  &:hover {
    .hoverShadow();
  }

  .top {
    position: relative;

    img, .cover-img {
      width: 100%;
      height: 288px;
      object-fit: cover;
    }

    .cover-img {
      position: absolute;
      left: 0;
      top: 0;
      background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 50%);
    }

    .cover {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      align-items: center;

      .left {
        width: 282px;
        padding-left: 16px;
        height: 70px;

        p:nth-of-type(1) {
          font-size: 22px;
          color: white;
        }

        p:nth-of-type(2) {
          font-size: 19px;
          color: #999;
        }
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          padding: 4px 8px 4px 4px;
          border-radius: 2px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: @priceColor;
          background-color: white;
          font-size: 17px;
        }
      }
    }
  }

  .bottom {
    font-size: 16px;
    background-color: white;
    height: 72px;
    padding: 0 20px;

    span {
      height: 100%;
      display: flex;
      align-items: center;

      i {
        color: #999;
        margin: 0 3px;
      }
    }

    span ~ span {
      margin-left: 25px;
    }
  }
}
</style>